<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>量表打印</title>
    <style>
      @media print {
        html,
        body {
          margin: 0;
          font-size: 0.5mm;
        }

        @page {
          size: A4;
          margin: 5mm;
        }
        #app {
          width: 100%;
          height: 100%;
        }

        .img-logo {
          width: 100%;
          height: 9mm;
        }
        .ul-box {
          padding: 0;
          margin: 0;
        }
        .ul-box li {
          list-style: none;
          float: left;
          width: 50%;
          margin-bottom: 3mm;
        }
        .ul-box::after {
          display: block;
          content: "";
          clear: both;
        }
      }
    </style>
  </head>
  <body>
    <div id="app" v-if="dataInfo">
      <div v-for="(item,index) in list" :key="index">
        <table width="100%" style="border: none;">
          <tr>
            <td style="width:40mm;">
              <img class="img-logo" :src="dataInfo.hospital.logo" alt="" />
            </td>
            <td style="text-align: center">
              <div style="font-size:5mm;">{{dataInfo.hospital.name}}</div>
              <div style="margin-top:1mm;">
                门诊病历
              </div>
            </td>
            <td style="width:40mm;"></td>
          </tr>
        </table>

        <br />
        <table border="0" width="100%" style="border-bottom: 0.1mm solid #000;">
          <tr style="height:8mm;">
            <td style="width:30%;">科室：妇产科</td>
            <td style="width:30%;">日期：{{dataInfo.detail.gmtCreate}}</td>
            <td style="text-align:right;">
              档案号：{{dataInfo.patient.archivesCode}}
            </td>
          </tr>
        </table>

        <table border="0" width="100%" style="border-bottom: 0.1mm solid #000;">
          <tr style="height:8mm;">
            <td style="width:25%;">姓名：{{dataInfo.patient.name}}</td>
            <td style="width:25%;">
              性别： {{dataInfo.patient.sex ==1?'男':(dataInfo.patient.sex
              ==2?'女':'不详')}}
            </td>
            <td style="width:25%;">
              年龄：<span v-if="dataInfo.patient.age>18"
                >{{dataInfo.patient.age}}岁</span
              >
              <span v-else>{{dataInfo.patient.birthday|toAge}}</span>
            </td>
            <td style="text-align:right;">电话：{{dataInfo.patient.mobile}}</td>
          </tr>
        </table>

        <div style="height:230mm;width:80%;margin:0 auto;">
          <br />
          <div>量表名称：{{dataInfo.data.scaleName}}</div>
          <br />
          <div style="display: flex;">
            <div style="flex-shrink: 0;padding-right:6mm;">
              <h3 v-if="dataInfo.detail.scaleRuleType==0" style="margin:0;">
                评测结果：{{dataInfo.detail.score}}分
              </h3>
              <h3 v-else style="margin:0;">评测结果：</h3>
            </div>
            <div style="flex-grow: 1;">
              <h3
                style="margin:0;"
                v-for="(item,index) in dataInfo.detail.scaleScoreRules"
                :key="index"
              >
                {{item.scoreTypeName}}&nbsp;{{item.getScore}}&nbsp;{{item.scoreTypeDesc}};
              </h3>
            </div>
          </div>
          <br />
          <div>问答详情：</div>
          <br />
          <ul class="ul-box">
            <li v-for="(item2,index2) in item" :key="index2">
              <div>{{index2+1+(index*pageSize)}}：{{item2.itemName}}</div>
              <div style="margin-top:1mm;padding-left:4mm;">
                {{item2.checkName}}
              </div>
            </li>
          </ul>
        </div>
        <table
          style="width:100%;border:none;border-top:0.1mm solid #000;page-break-after: always;"
        >
          <tr style="height:8mm;">
            <td>{{dataInfo.hospital.address}}</td>
            <td>医师：刘铭</td>
          </tr>
        </table>
      </div>
    </div>
  </body>
  <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        list: [],
        dataInfo: null,
        pageSize: 30, //每页打印数量
      },
      mounted() {
        var th = this;
        window.addEventListener("message", function(e) {
          var json = e.data;
          th.getPage(json.detail.pageInfo.list);
          th.dataInfo = json;
          th.$nextTick(function() {
            th.isLoadImg();
          });
        });
      },
      methods: {
        //解析处方单子
        getPage(array) {
          var th = this;
          var fn = function(groupArr) {
            var arr = [];
            var list = [];
            var sellMoney = 0;
            //如果是pageSize的倍数就第二页
            for (var index = 0; index < groupArr.length; index++) {
              var item = groupArr[index];
              arr.push(item);
              var i = index + 1;
              if (i % th.pageSize == 0) {
                list.push(arr);
                arr = [];
              }
            }
            if (arr.length > 0) {
              list.push(arr);
            }
            th.list = list;
          };
          fn(array);
        },
        isLoadImg() {
          //这里要判断图片是否加载完成
          var imgs = document.getElementsByTagName("img");
          var timer = setInterval(() => {
            var i = 0;
            for (var index = 0; index < imgs.length; index++) {
              var element = imgs[index];
              if (element.complete) {
                i++;
              }
            }
            if (i == imgs.length) {
              clearInterval(timer);
              window.print();
            }
          }, 500);
        },
      },
      filters: {
        toAge(birthday) {
          if (!birthday) return "";
          var now = new Date();
          var year = now.getFullYear();
          var month = now.getMonth() + 1;
          var day = now.getDate();
          var hour = now.getHours();
          var minute = now.getMinutes();
          var second = now.getSeconds();
          var myDate = new Date(birthday);
          var myYear = myDate.getFullYear();
          var myMonth = myDate.getMonth() + 1;
          var myDay = myDate.getDate();
          var myHour = myDate.getHours();
          var myMinute = myDate.getMinutes();
          var mySecond = myDate.getSeconds();
          var isLeapYear = function isLeapYear(year) {
            return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
          };
          var getDaysOfMonth = function getDaysOfMonth(dateStr) {
            var date = new Date(dateStr);
            var year = date.getFullYear();
            var mouth = date.getMonth() + 1;
            var day = 0;

            if (mouth == 2) {
              day = isLeapYear(year) ? 29 : 28;
            } else if (
              mouth == 1 ||
              mouth == 3 ||
              mouth == 5 ||
              mouth == 7 ||
              mouth == 8 ||
              mouth == 10 ||
              mouth == 12
            ) {
              day = 31;
            } else {
              day = 30;
            }
            return day;
          };
          var gapSecond = second - mySecond;
          if (gapSecond < 0) {
            minute -= 1;
            gapSecond = 60 - mySecond + second;
          }
          var gapMinute = minute - myMinute;
          if (gapMinute < 0) {
            hour -= 1;
            gapMinute = 60 - myMinute + minute;
          }
          var gapHour = hour - myHour;
          if (gapHour < 0) {
            day -= 1;
            gapHour = 24 - myHour + hour;
          }
          var gapDay = day - myDay;
          if (gapDay < 0) {
            month -= 1;
            gapDay = getDaysOfMonth(birthday) - myDay + day;
          }
          var gapMonth = month - myMonth;
          if (gapMonth < 0) {
            year -= 1;
            gapMonth = 12 - myMonth + month;
          }
          var gapYear = year - myYear;
          if (gapYear < 0) {
            gapYear = 0;
          }
          var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
          // (gapHour<10? ("0"+gapHour): gapHour)+"时 " +
          // (gapMinute<10? ("0"+gapMinute): gapMinute)+"分 " +
          // (gapSecond<10? ("0"+gapSecond): gapSecond)+"秒";

          return dateStr;
        },
      },
    });
  </script>
</html>
